<template>
  <div class="system-settings">
    <h2>{{ $t('message.systemSettings') }}</h2>
    
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane :label="$t('message.platformSettings')" name="platform">
        <PlatformSettings />
      </el-tab-pane>
      <el-tab-pane :label="$t('message.youbiSettings')" name="youbi">
        <YoubiSettings />
      </el-tab-pane>
      <el-tab-pane :label="$t('message.userManagement')" name="user">
        <UserManagement />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import PlatformSettings from '@/components/admin/PlatformSettings.vue';
import YoubiSettings from '@/components/admin/YoubiSettings.vue';
import UserManagement from '@/components/admin/UserManagement.vue';

export default {
  name: 'SystemSettings',
  components: {
    PlatformSettings,
    YoubiSettings,
    UserManagement
  },
  setup() {
    const { t } = useI18n();
    
    const activeTab = ref('platform');
    
    return {
      activeTab
    };
  }
};
</script>

<style scoped>
.system-settings {
  padding: 20px;
}
</style>